<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">订单详情</view>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">◎</text>
			</view>
		</view>

		<!-- 支付成功提示 -->
		<view class="success-banner">
			<view class="success-message">支付成功,请您前往指定门店消费</view>
			<view class="shop-info-row">
				<text class="shop-icon">🏪</text>
				<view class="shop-info">
					<view class="shop-name">{{ orderInfo.shopName }}</view>
					<view class="shop-address">{{ orderInfo.shopAddress }}</view>
				</view>
				<text class="share-icon">✈</text>
			</view>
		</view>

		<scroll-view scroll-y class="content-scroll">
			<!-- 订单详情卡片 -->
			<view class="detail-card">
				<view class="card-title">订单详情</view>
				<view class="detail-row">
					<text class="detail-label">车辆精洗</text>
					<text class="detail-value">¥ {{ orderInfo.servicePrice }}</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">车辆附加费用</text>
					<text class="detail-value">0</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">原价</text>
					<text class="detail-value">¥ {{ orderInfo.originalPrice }}</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">店家优惠</text>
					<text class="detail-value discount">- ¥ {{ orderInfo.storeDiscount }}</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">优惠券</text>
					<text class="detail-value discount">- ¥ {{ orderInfo.couponDiscount }}</text>
				</view>
				<view class="detail-row total-row">
					<text class="detail-label">支付金额</text>
					<text class="detail-value total">¥ {{ orderInfo.totalPrice }}</text>
				</view>
			</view>

			<!-- 订单信息卡片 -->
			<view class="info-card">
				<view class="card-title">订单信息</view>
				<view class="info-row">
					<text class="info-label">订单号:</text>
					<text class="info-value">{{ orderInfo.orderNumber }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">下单时间:</text>
					<text class="info-value">{{ orderInfo.orderTime }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">车辆:</text>
					<text class="info-value">{{ orderInfo.vehicle }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				orderInfo: {
					shopName: '伟业汽车美容店 (人民路店)',
					shopAddress: '山阳区人民中路33号',
					servicePrice: 39.90,
					originalPrice: 59.90,
					storeDiscount: 20,
					couponDiscount: 10,
					totalPrice: 29.9,
					orderNumber: '121212112487878',
					orderTime: '2020.01.08 17:40',
					vehicle: '奔驰FWE4/豫A98FHJ'
				}
			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FA;
		display: flex;
		flex-direction: column;
	}

	.custom-nav {
		height: 44px;
		display: flex;
		align-items: center;
		background-color: #4A90E2;
		position: relative;
	}

	.nav-back {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: white;
		font-size: 32px;
		font-weight: bold;
		line-height: 44px;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		color: white;
		font-size: 18px;
		font-weight: 500;
	}

	.nav-right {
		width: 88px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 15px;
	}

	.nav-icon {
		color: white;
		font-size: 20px;
		margin-left: 10px;
	}

	.success-banner {
		background-color: #4A90E2;
		padding: 20px 15px;
		color: white;
	}

	.success-message {
		font-size: 14px;
		margin-bottom: 15px;
	}

	.shop-info-row {
		display: flex;
		align-items: center;
	}

	.shop-icon {
		font-size: 20px;
		margin-right: 10px;
	}

	.shop-info {
		flex: 1;
	}

	.shop-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.shop-address {
		font-size: 12px;
		opacity: 0.9;
	}

	.share-icon {
		font-size: 20px;
		margin-left: 10px;
	}

	.content-scroll {
		flex: 1;
		padding: 15px;
	}

	.detail-card,
	.info-card {
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #F5F7FA;
	}

	.detail-row:last-child {
		border-bottom: none;
	}

	.detail-label {
		font-size: 14px;
		color: #666;
	}

	.detail-value {
		font-size: 14px;
		color: #333;
	}

	.detail-value.discount {
		color: #FF4444;
	}

	.total-row {
		margin-top: 10px;
		padding-top: 15px;
		border-top: 1px solid #E0E0E0;
	}

	.detail-value.total {
		font-size: 20px;
		font-weight: bold;
		color: #4CD964;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #F5F7FA;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 14px;
		color: #666;
	}

	.info-value {
		font-size: 14px;
		color: #333;
	}
</style>